<template>
	<div v-if="income" class="user_box">
		<div class="user_box-top">
			<!-- 头像 -->
			<div class="user-top" :style="income.consumption_status > 0 ? 'height:4.6rem' : 'height:2.6rem'">
				<img class="set" src="../../images/mine/icon_set.png" alt="" @click="goSetup">
				<!-- 头像 -->
				<img class="user-head" v-if="avatar_url" :src="avatar_url" alt="" />
				<img class="user-head" v-else src="../../images/mine/head.png" alt="" />

				<!-- 信息 -->
				<div class="user-data">
					<div class="user-data-name">
						<div class="user-data-name_label">{{ income.nickname }}</div>
						<!-- <img v-if="income.avatar_url" class="user-data-level" :src="income.avatar_url" alt="" /> -->
						<img v-for="item, index in income.identity_icons" v-if="income.identity_icons"
							class="user-data-level" :src="item.icon" alt="" />
					</div>
					<div class="user-data-invite">
						<i style="font-style: normal;" v-if="isShow">邀请码:{{ invite_code }}</i>
						<span @click="copyText" v-if="isShow">复制</span><span @click="isShow = !isShow">{{
							isShow ? "隐藏" : "显示邀请码"
						}}</span>
					</div>
				</div>
			</div>
			<!-- 余额 -->
			<div class="user-amount top" v-if="income.consumption_status > 0">
				<div class="money-box" style="padding-top: .5rem;">
					<div class="money-li" @click="getConsumption(3)">
						<div class="money-li__value">{{ Number(income.balance_gxz).toFixed(2) }}</div>
						<div class="money-li__label" style="color: #333;">贡献值</div>
					</div>
					<div class="money-li center" @click="getConsumption(2)">
						<div class="money-li__value">{{ Number(income.balance_sel).toFixed(2) }}</div>
						<div class="money-li__label" style="color: #333;">数字资产</div>
					</div>
					<div class="money-li center" @click="getConsumption(4)">
						<div class="money-li__value">{{ Number(income.balance_xjq).toFixed(2) }}</div>
						<div class="money-li__label" style="color: #333;">现金券</div>
					</div>
					<div class="money-li" @click="getConsumption(1)">
						<div class="money-li__value">{{ Number(income.balance).toFixed(2) }}</div>
						<div class="money-li__label" style="color: #333;">我的余额</div>
					</div>
				</div>
			</div>
			<div class="user-amount" v-if="income.consumption_status > 0">
				<div class="user-order-top">
					<div class="user-order-top__label">
						<div class="user-order-top__label__first" :class="{ active: activeDataType === 0 }" @click="switchDataType(0)">收益数据</div>
						<div class="user-order-top__label__first" :class="{ active: activeDataType === 1 }" @click="switchDataType(1)">贡献值数据</div>
					</div>
					<div plain type="primary" class="user-order-top__btn" @click="handleRevenue">
						全部
						<van-icon name="arrow" />
					</div>
				</div>

				<div class="money-box">
					<div class="money-li">
						<div class="money-li__value">{{ activeDataType === 0 ? income.income_today : income.income_today_gxz || 0 }}</div>
						<div class="money-li__label">今日收益</div>
					</div>
					<div class="money-li center">
						<div class="money-li__value">{{ activeDataType === 0 ? income.income_month : income.income_month_gxz || 0 }}</div>
						<div class="money-li__label">本月入账</div>
					</div>
					<div class="money-li">
						<div class="money-li__value">{{ activeDataType === 0 ? income.income_total : income.income_total_gxz || 0 }}</div>
						<div class="money-li__label">总入账</div>
					</div>
				</div>
			</div>
		</div>

		<!--  -->
		<!-- 我的订单 -->
		<div class="user-order">
			<div class="user-order-top">
				<div class="user-order-top__label">我的订单</div>
				<div plain type="primary" class="user-order-top__btn" @click="getorder(0)">
					全部订单
					<van-icon name="arrow" />
				</div>
			</div>
			<div class="order-box">
				<div class="order-li" @click="getorder(1)">
					<img class="order-li__value" src="../../images/mine/icon_daifu.png" alt="" />
					<div class="order-li__label">待付款</div>
					<div class="badge" v-if="wait_payment > 0">{{ wait_payment }}</div>
				</div>
				<div class="order-li center" @click="getorder(2)">
					<img class="order-li__value" src="../../images/mine/icon_daishou.png" alt="" />
					<div class="order-li__label">待收货</div>
					<div class="badge" v-if="wait_confirm > 0">{{ wait_confirm }}</div>

				</div>
				<div class="order-li" @click="getorder(3)">
					<img class="order-li__value" src="../../images/mine/icon_wancheng.png" alt="" />
					<div class="order-li__label">已完成</div>
				</div>
				<div class="order-li" @click="getorder(4)">
					<img class="order-li__value" src="../../images/mine/icon_quxiao.png" alt="" />
					<div class="order-li__label">已取消</div>
				</div>
				<div class="order-li" @click="getReturnOrRefund">
					<img class="order-li__value" src="../../images/mine/icon_shouhou.png" alt="" />
					<div class="order-li__label">售后</div>
					<div class="badge" v-if="after_sales > 0">{{ after_sales }}</div>

				</div>
			</div>
		</div>
		<!-- <div class="empty_box"></div> -->

		<div class="yqhy_box" @click="getInviteFriend">
			<img src="../../images/mine/bg-yqhy.png" alt="邀请好友" class="yqhy_img" />
		</div>

		<!-- 我的服务 -->
		<div class="service-box">
			<!-- <div class="service-box-title">我的服务</div> -->
			<div class="service-box-ul">
				<!-- <div @click="getConsumptionRecord" class="service-box-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_xfjl.png">
					<div class="service-box-li-name">消费记录</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<div @click="getProfitCore" class="service-box-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_syzx.png">
					<div class="service-box-li-name">收益中心</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div> -->
				<!-- <div @click="getConsumptionWater" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_wdsd.png">
					<div class="service-box-li-name">我的水袋</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">

				</div> -->

				<div @click="getAgent" class="service-box-li" v-if="income.consumption_status > 0">
					<img class="service-box-li-icon" src="../../images/mine/icon_dlscx.png">
					<div class="service-box-li-name">区域代理</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<div @click="getPartner" class="service-box-li" v-if="income.consumption_status > 0">
					<img class="service-box-li-icon" src="../../images/mine/icon_hhr1.png">
					<div class="service-box-li-name">合伙人</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<div @click="getMyteam" class="service-box-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_wdtd.png">
					<div class="service-box-li-name">我的用户</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<div @click="getConsumption(4)" class="service-box-li" v-if="income.consumption_status == 0">
					<img class="service-box-li-icon" src="../../images/mine/icon_xjq.png">
					<div class="service-box-li-name">现金券</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<!-- <div v-if="view_agent_data!=0" @click="getAuthData" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/icon_sqsj.png">
					<div class="service-box-li-name">股东数据</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">

				</div>  -->
				<!-- <div @click="getRedEnvelope" class="service-box-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_hbzx.png">
					<div class="service-box-li-name">红包中心</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div> -->
				<div @click="handleToKefu" class="service-box-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_zxkf.png">
					<div class="service-box-li-name">官方客服</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<!-- <div @click="getInviteFriend" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_yqhy.png">
					<div class="service-box-li-name">邀请好友</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div> -->
				<div @click="getMerchantSettle" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/icon_sjrz.png">
					<div class="service-box-li-name">商家入驻</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">
				</div>
				<div @click="getShopSettle" class="service-box-li last-li" style="margin-bottom: 0;">
					<img class="service-box-li-icon" src="../../images/mine/icon_mdrz.png">
					<div class="service-box-li-name">门店入驻</div>
					<img src="../../images/mine/profit-arrow-icon.png" alt="" class="arrow_icon">

				</div>
				<!-- <div @click="getMyPrivate" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/pofit-icon-6.png">
					<div class="service-box-li-name">我的私域</div>
				</div> -->
				<!-- <div @click="handleToxiaofei" class="service-box-li">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon10.png">
					<div class="service-box-li-name">现金消费券</div>
				</div> -->
				<!-- <div @click="getConsumption(1)" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon11.png">
					<div class="service-box-li-name">消费金</div>
				</div>
				<div @click="getConsumption(2)" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon12.png">
					<div class="service-box-li-name">花朵</div>
				</div>
				<div @click="getRedEnvelope(1)" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon13.png">
					<div class="service-box-li-name">红包</div>
				</div>


				<div @click="getShopSettle" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon6.png">
					<div class="service-box-li-name">门店入驻</div>
				</div> -->
				<!--
				<div @click="goSetup" class="service-box-li last-li">
					<img class="service-box-li-icon" src="../../images/mine/mine-server-icon8.png">
					<div class="service-box-li-name">系统设置</div>
				</div> -->
			</div>

		</div>

		<footTab :current="4" style="z-index: 9999;"></footTab>
		
		<!-- 微信授权弹窗 -->
		<div v-if="isWechatBrowser && wechat_status === 0 && !hasAuthCode" class="wechat-auth-modal">
			<div class="modal-content">
				<img class="modal-icon" src="../../images/mine/wechat.png" alt="微信图标">
				<div class="modal-title">微信授权</div>
				<div class="modal-desc">为了更好地为您提供服务，请授权微信账号</div>
				<button class="auth-btn" @click="handleWechatAuth">立即授权</button>
			</div>
		</div>

	</div>
</template>

<script>
import {
	USERDETAIL, ORDER_COUNT,WX_DATA_SYNC
} from "@/api/mine";
import footTab from "@/components/foot-tab";
import {
	mineLevel1,
	mineLevel2,
	mineLevel3,
	mineLevel4,
	mineLevel5,
	mineLevel6,
	mineLevel7,
	mineLevel8,
} from '@/tool/static-img';
import { formatSubsidy } from '@/tool/methods'
import { WX_PAY } from '@/api/mine'
export default {
	components: {
		footTab
	},
	data() {
				return {
					mineLevel1,
					mineLevel2,
					mineLevel3,
					mineLevel4,
					mineLevel5,
					mineLevel6,
					mineLevel7,
					mineLevel8,
					nickname: "",
					avatar_url: "",
					invite_code: "",
					account: "",
					uid: '',
					level: 0, // 用户级别
					isShow: true,
					income: null,
					view_agent_data: null,
					after_sales: 0, //售后中
					wait_confirm: 0, //待收货
					wait_payment: 0, //待支付
					wechat_status: 0, // 微信绑定状态
					hasAuthCode: false, // 是否存在授权码
					isWechatBrowser: false, // 是否在微信浏览器环境中
					activeDataType: 0, // 0:收益数据, 1:贡献值数据
				};
	},
	computed: {
		levelConfig() {
			switch (this.level) {
				case 0:
					return {
						bg: mineLevel1,
						levelBtnBg: '#46606A',
						levelBtnTextColor: '#FFFFFF',
						color: '#46606A'
					};
					break;
				case 1:
					return {
						bg: mineLevel2,
						levelBtnBg: '#32647B',
						levelBtnTextColor: '#FFFFFF',
						color: '#2E5E75'
					};
					break;
				case 2:
					return {
						bg: mineLevel3,
						levelBtnBg: '#466A51',
						levelBtnTextColor: '#FFFFFF',
						color: '#3B5E46'
					};
					break;
				case 3:
					return {
						bg: mineLevel4,
						levelBtnBg: '#986D3E',
						levelBtnTextColor: '#FFFFFF',
						color: '#694926'
					};
					break;
				case 103:
					return {
						bg: mineLevel5,
						levelBtnBg: '#6A3F38',
						levelBtnTextColor: '#FFFFFF',
						color: '#6A3F38'
					};
					break;
				case 102:
					return {
						bg: mineLevel6,
						levelBtnBg: '#402C82',
						levelBtnTextColor: '#FFFFFF',
						color: '#402C82'
					};
					break;
				case 101:
					return {
						bg: mineLevel7,
						levelBtnBg: '#FFFFFF',
						levelBtnTextColor: '#262B55',
						color: '#FFFFFF'
					};
					break;
				case 100:
					return {
						bg: mineLevel8,
						levelBtnBg: '#FFFFFF',
						levelBtnTextColor: '#7A1000',
						color: '#FFFFFF'
					};
					break;
			}
		}
	},
	activated() {
		// 当组件被激活时，重新加载数据
		document.title = '我的';
		this.getMine()
		// 重新获取订单数量，以更新徽章显示
		this.getOrderCount()
	},
	created() {
			// window.scrollTop(0, 0)
			// 检测是否在微信浏览器环境中
			const userAgent = window.navigator.userAgent.toLowerCase();
			this.isWechatBrowser = /micromessenger/.test(userAgent);
			// console.log('是否在微信浏览器环境中:', this.isWechatBrowser);
			
			
			// 获取URL授权码
			const auth_code = this.getUrlParam('code')
			// console.log('获取URL授权码:', auth_code)
			if (auth_code) {
				this.hasAuthCode = true
				// 检查URL中是否有微信授权回调的code参数
				this.checkWechatAuthCallback()
				// 拿到code后清理 URL
				this.cleanUrlCode()
		}

		},
	mounted() {
		// this.getMine()
		this.getOrderCount()
	},
	methods: {
		// 从URL中提取参数的辅助函数
		getUrlParam(name) {
		const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
		const r = window.location.search.substr(1).match(reg)
		if (r != null) {
			return unescape(r[2])
		}
		return null
		},

		// 清理 URL 中的 code 参数
		cleanUrlCode() {
		const { href } = window.location
		// 分割 URL 为「查询参数部分」和「哈希部分」（避免哈希被误处理）
		const [urlWithoutHash, hash = ''] = href.split('#')
		// 1. 清理查询参数中的 code 和 state
		let cleanUrlWithoutHash = urlWithoutHash
		// 正则匹配并删除所有 code=xxx& 或 state=xxx&（处理重复参数）
		cleanUrlWithoutHash = cleanUrlWithoutHash.replace(/([&?])code=[^&]+&?/g, '$1')
		cleanUrlWithoutHash = cleanUrlWithoutHash.replace(/([&?])state=[^&]+&?/g, '$1')
		// 去除末尾可能残留的 & 或 ?
		cleanUrlWithoutHash = cleanUrlWithoutHash.replace(/[&?]$/, '')
		// 2. 重组 URL（干净的路径 + 保留的哈希）
		const cleanHref = `${cleanUrlWithoutHash}${hash ? '#' + hash : ''}`
		// 3. 替换当前 URL（不新增历史记录）
		if (cleanHref !== href) {
			window.history.replaceState(null, null, cleanHref)
		}
		},

		getOrderCount() {
			this.$http.get(ORDER_COUNT).then((res) => {
				this.after_sales = res.data.after_sales
				this.wait_confirm = res.data.wait_confirm
				this.wait_payment = res.data.wait_payment
			})
		},
		getMine() {
			if (!this.isLogin()) {
				return;
			}

			// this.$http.get('/store/manage/list')


			this.$http.get(USERDETAIL).then((res) => {
				this.income = res.data;
				// this.income.balance = formatSubsidy(this.income.balance)
				// this.income.credit = formatSubsidy(this.income.credit)
				// this.income.integral = formatSubsidy(this.income.integral)
				// this.income.income_today = formatSubsidy(this.income.income_today)
				// this.income.income_yesterday = formatSubsidy(this.income.income_yesterday)
				// this.income.income_total = formatSubsidy(this.income.income_total)

				this.invite_code = res.data.invite_code;
				this.nickname = res.data.nickname;
				this.uid = res.data.uid;
				this.avatar_url = res.data.avatar_url;
				this.account = res.data.account;
				this.level = res.data.level;
				this.view_agent_data = res.data.view_agent_data
				this.wechat_status = res.data.wechat_status
			});
			// window.scrollTo(0, 0)
			localStorage.removeItem('profit')
		},
		// 是否登录
		isLogin() {
			const token = localStorage.getItem("token");
			if (!token) {
				this.$router.push({
					name: "login",
				});
				return false;
			}

			return true;
		},
		// 复制文本
		//     copyText() {
		//   navigator.clipboard.writeText(this.invite_code).then(() => {
		//     // Toast('复制成功');
		//     this.$toast("复制成功")
		//   }).catch(err => {
		//     this.$toast("复制失败")
		//     // Toast('复制失败');
		//   });
		// },
		copyText(text) {
			// 创建一个临时的输入元素
			const input = document.createElement('input');
			input.value = this.invite_code;
			document.body.appendChild(input);
			// 选择输入框中的文本
			input.select();
			input.setSelectionRange(0, 99999); // 对于移动设备

			// 执行复制命令
			document.execCommand('copy');

			// 移除临时输入框
			document.body.removeChild(input);
			this.$toast("复制成功")
		},
		// 提现
		getWithdrawal() {
			this.$router.push({
				path: '/consumptionGold',
				query: {
					id: 3
				}
			})
			// this.$router.push({
			// 	path: "/withdrawal"
			// });
		},
		// 设置
		goSetup() {
			// console.log(11);
			this.$router.push({
				path: "/setup",
				// query:{
				//   account:this.account,
				//   avatar_url:this.avatar_url,
				//   nickname:this.nickname
				// }
			});
		},
		// 订单
		getOrder(id) {
			this.$router.push({
				path: "/orderList",
				query: {
					id: id,
				},
			});
		},
		// 待付款
		getorder(id) {
			this.$router.push({
				path: "/order",
				query: {
					id: id,
				},
			});
		},
		// 待发货
		getorder(id) {
			this.$router.push({
				path: "/order",
				query: {
					id: id,
				},
			});
		},
		//订单
		getorder(id) {
			this.$router.push({
				path: "/orderList",
				query: {
					id: id,
				},
			});
		},
		// 售后
		getReturnOrRefund() {
			this.$router.push({
				path: "/returnOrRefund",
			});
		},
		// 消费记录
		getConsumptionWater() {
			// this.$toast("暂未开放")
			return
			this.$router.push({
				name: 'myWater'
			})
		},
		getConsumptionRecord() {
			this.$router.push({
				path: "/consumptionRecord",
			});
		},
		// 收益中心
		getProfitCore() {
			this.$router.push({
				path: "/profitCore",
				// query: {
				//   subsidy: this.income.subsidy,
				//   bonus_hhr: this.income.bonus_hhr,
				//   bonus_zj: this.income.bonus_zj,
				//   balance: this.income.balance,
				//   level_name: this.income.level_name,
				// },
			});
			// localStorage.setItem("profit", JSON.stringify(this.income))
		},
		// 我的用户
		getMyteam() {
			this.$router.push({
				path: "/myteam",
			});
		},
		//合伙人
		getPartner() {
			if (this.income.partner_status == 1) {
				this.$router.push({
					path: "/myPartner",
				})
			} else {
				this.$router.push({
					path: "/partner",
				})
			}
		},
		//代理商查询
		getAgent() {
			this.$router.push({
				path: "/level",
			});
		},
		// 我的私域
		getMyPrivate() {
			this.$router.push({
				path: "/myPrivate",
			});
		},
		// 商家入驻
		getMerchantSettle() {
			// this.$toast("暂未开放")
			// return
			this.$router.push({
				path: "/merchantList",
			});
			// this.$router.push({
			// 	path: "/merchantSettle",
			// });
		},
		// 门店入驻
		getShopSettle() {
			this.$router.push({
				path: "/shopSettleList",
			});
		},

		// 邀请好友
		getInviteFriend() {
			this.$router.push({
				path: "/invite",
			});
		},
		// 客服
		handleToKefu() {
			let isWeChatBrowser = /MicroMessenger/i.test(navigator.userAgent)
			if (isWeChatBrowser) {
				window.location.href = 'https://work.weixin.qq.com/kfid/kfc73aae6b86b7c3ccd'
			} else {
				this.$toast('暂未开放，请到微信公众号联系客服')
			}
			return
			const fromUrl = window.location.href;

			const clientId = this.uid;
			if (clientId && this.nickname) {
				// 用户
				const otherParams = JSON.stringify({
					"nickName": this.nickname
				})
				window.location.href =
					`https://webchat02.7moor.com/wapchat.html?accessId=62ea1e10-6fec-11ef-a989-e5cf0d8aa69c&clientId=${clientId}&otherParams=${otherParams}&fromUrl=${fromUrl}&urlTitle=h5&language=ZHCN`
			} else {
				// 游客
				window.location.href =
					`https://webchat02.7moor.com/wapchat.html?accessId=62ea1e10-6fec-11ef-a989-e5cf0d8aa69c&fromUrl=${fromUrl}&urlTitle=h5&language=ZHCN`
			}
		},
		//授权数据
		getAuthData() {
			// this.$router.push({
			// 	name: 'authData',
			// 	query: {
			// 		level: 1
			// 	}
			// })
		},
		// 优惠券
		handleToxiaofei() {
			this.$router.push({
				name: 'consumption'
			})
		},
		// 贡献值
		getConsumption(id) {
			this.$router.push({
				name: 'consumptionGold',
				query: {
					id
				}
			})
		},
		//现金券
		getCashCoupon() {
			this.$router.push({
				name: 'cashCoupon',
				query: {
					id: 4
				}

			})
		},
		//切换数据类型
		switchDataType(type) {
			this.activeDataType = type;
		},
		//收益数据
		handleRevenue() {
			this.$router.push({
				name: 'revenue',
				query: {
					capital_type: this.activeDataType === 0 ? 10 : 2
				}
			})
		},
		//红包
		getRedEnvelope() {
			this.$router.push({
				name: 'redEnvelope',

			})
		},

		// 微信授权
		handleWechatAuth() {
			// 微信授权：先调用接口获取授权URL
			this.$http.post(WX_PAY, { redirect_uri: location.href.split('#')[0] + '#/mine',  type: 1})
			// this.$http.post(WX_PAY, { redirect_uri: 'https://dev.zzl868.com/web/#/mine',  type: 1})
				.then((authRes) => {
					// 获取授权URL
					console.log('authRes', authRes.data.auth_url)
					// 跳转到微信授权页面
					location.href = authRes.data.auth_url
				})
				.catch((error) => {
					console.error('获取微信授权码失败:', error)
					this.$toast('微信授权失败，请重试')
				})
			
		},

		// 检查微信授权回调
		checkWechatAuthCallback() {
			// 从URL中获取code参数
			const code = this.getUrlParam('code')
			
			// 如果存在code参数，则调用接口同步微信信息
			if (code) {
				console.log('检测到微信支付回调的code参数:', code)
				// 调用WX_DATA_SYNC接口同步微信昵称和头像
				this.$http.post(WX_DATA_SYNC, { code: code })
					.then((syncRes) => {
						console.log('syncRes', syncRes.data)
						console.log('微信信息同步成功')
						// 重新获取用户信息
						this.getMine();
						// 更新当前页面状态
						this.$router.push({ name: 'mine' });
					})
					.catch((error) => {
						console.error('微信信息同步失败:', error);
						this.$toast('微信信息同步失败，请重试');
					});
			}
		}

	},

};
</script>

<style lang="scss" scoped>
.user_box {
	min-height: calc(100vh - 46px);
	background-color: #f5f5f5;
	padding-bottom: calc(1.3rem + constant(safe-area-inset-bottom));
	padding-bottom: calc(1.3rem + env(safe-area-inset-bottom));
}

.user_box-top {
	background-color: #FFFFFF;
}

.user-top {
	background: url("../../images/mine/img_beij.png") no-repeat center;
	background-size: cover;
	height: 4.6rem;
	padding: 0.4rem;
	padding-top: .8rem;
	display: flex;
	flex-wrap: nowrap;
	color: #fff;
	box-sizing: border-box;

	.set {
		position: absolute;
		right: 0.4rem;
		top: 0.4rem;
		width: .48rem;
		height: .48rem;
	}

	.user-head {
		width: 1.08rem;
		height: 1.08rem;
		border-radius: 50%;
		margin-top: 0.16rem;
		margin-left: 0.12rem;
	}

	.user-data {
		margin-left: 0.24rem;
		line-height: 0.5rem;
		margin-top: 0.16rem;

		.user-data-name {
			display: flex;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 0.36rem;
			color: #333;
			line-height: .5rem;
			text-align: left;
			font-style: normal;

			// display: flex;
			&_label {
				max-width: 3rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 0.04rem;
			}

			.user-data-level {
				// width: .44rem;
				height: .36rem;
				// margin-top:.2rem;
				vertical-align: middle;
				// padding: 0.04rem 0.2rem;
				font-size: 0.28rem;
				font-weight: 500;
				border-radius: 0.05rem;
				margin-left: 0.15rem;
				// color: #333;
			}
		}

		.user-data-invite {
			font-size: 0.24rem;
			// margin-top: 0.2rem;

			// margin-right: 0.1rem;
			color: #666;

			span {
				padding: 0.03rem 0.04rem;
				font-size: 0.24rem;
				opacity: 0.6;
				border-radius: 0.05rem;
				margin-left: 0.1rem;
				text-decoration-line: underline;
				color: #333;
			}
		}
	}

	// .van-icon {

	// }
	.user-set {
		position: absolute;
		right: 0.4rem;
		top: 0.4rem;
		width: 0.48rem;
		height: 0.48rem;
		margin-top: -0.1rem;
		margin-right: -0.1rem;
	}
}

// 余额
.user-amt {
	position: relative;
	width: 7.02rem;
	height: 3.82rem;
	padding-top: 1.54rem;
	margin: auto;
	margin-top: -1.66rem;
	background-size: cover !important;
	box-sizing: border-box;

	.user-amt-level {
		position: absolute;
		top: 0.74rem;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 0.48rem;
		min-width: 2rem;
		font-weight: 500;
		font-size: 0.24rem;
		padding: 0 0.16rem;
		border-radius: 0.16rem 0 0.16rem 0;
		background-color: #466A51;
		box-sizing: border-box;
	}

	.user-amt-balance {
		display: flex;
		height: 0.6rem;

		.user-amt-balance-label {
			height: 0.34rem;
			margin-right: 0.2rem;
			margin-left: 0.36rem;
			margin-top: 0.2rem;
			line-height: 0.34rem;
			font-size: 0.24rem;
			font-weight: 400;
		}

		.user-amt-balance-val {
			height: 0.6rem;
			line-height: 0.6rem;
			font-weight: 500;
			font-size: 0.44rem;

			&::before {
				content: '￥';
				font-size: 0.32rem;
				font-weight: 500;
				height: 0.44rem;
				line-height: 0.44rem;
			}
		}
	}

	.user-amt-withdrawal {
		position: absolute;
		bottom: 0.58rem;
		right: 0.4rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.36rem;
		height: 0.56rem;
		font-size: 0.28rem;
		font-weight: 500;
		border-radius: 0.3rem;
	}


}

.user-amount {
	width: 95%;
	margin: 0 auto;
	height: 2.12rem;
	background: url('../../images//mine/img_amt.png') no-repeat center;
	background-size: cover;
	margin-top: -1rem;


	.user-order-top {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 0.16rem;
		color: #FFDFB0;
		padding: .24rem;
		padding-bottom: 0.28rem;
		// &::before {
		// 	content: '';
		// 	width: 6.96rem;
		// 	height: 1px;
		// 	position: absolute;
		// 	bottom: 0;
		// 	left: 0;
		// 	background-color: #F2F4F5;
		// 	transform: scaleY(0.5);
		// }

		.user-order-top__label {
			display: flex;
			align-items: center;
			height: 0.44rem;
			line-height: 0.44rem;
			font-size: 0.28rem;
			font-weight: 400;
			color: #FFDFB0;
			.user-order-top__label__first {
					margin-right: 0.4rem;
					position: relative;
			}
			.active {
					color: #FFDFB0;
					&::after {
						content: '';
						position: absolute;
						bottom: -0.1rem;
						left: 0;
						width: 50%;
						height: 2px;
						transform: translateX(50%);
						background-color: #FFDFB0;
					}
				}
				
				
			
		}

		.user-order-top__btn {
			display: flex;
			align-items: center;
			height: 0.34rem;
			line-height: 0.34rem;
			font-size: 0.24rem;
			color: #FFDFB0;
		}
	}

	.money-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-left: 0.04rem;
		// padding-top: .5rem;
		// margin-top: -1rem;
		color: #FFDFB0;

		.money-li {
			width: 33%;
			text-align: center;

			&.center {
				position: relative;

				&::before {
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					content: '';
					width: 0.02rem;
					height: 0.5rem;
					background: rgba(255, 243, 212, 0.2);
				}

				&::after {
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					content: '';
					width: 0.02rem;
					height: 0.5rem;
					background: rgba(255, 243, 212, 0.2);
				}
			}

			&__value {
				height: 0.44rem;
				margin-bottom: 0.08rem;
				line-height: 0.44rem;
				font-weight: 500;
				font-size: 0.32rem;
			}

			&__label {
				height: 0.34rem;
				line-height: 0.34rem;
				font-size: 0.24rem;
			}
		}
	}

}

.top {
	background: transparent;
	margin-bottom: .7rem;
	margin-top: -2.7rem;

	.money-box {
		color: #333333;
	}
}

// 我的订单
.user-order {
	padding: 0.34rem 0.32rem 0.32rem;
	box-sizing: border-box;
	background-color: #fff;

	.user-order-top {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 0.16rem;

		&::before {
			content: '';
			width: 6.96rem;
			height: 1px;
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: #F2F4F5;
			transform: scaleY(0.5);
		}

		.user-order-top__label {
			height: 0.44rem;
			line-height: 0.44rem;
			font-size: 0.32rem;
			font-weight: 500;
			color: #333333;
		}

		.user-order-top__btn {
			display: flex;
			align-items: center;
			height: 0.34rem;
			line-height: 0.34rem;
			font-size: 0.24rem;
			color: #666666;
		}
	}

	.order-box {
		display: flex;
		justify-content: space-between;
		height: 1.2rem;
		padding: 0 0.26rem;
		margin-top: 0.18rem;

		.order-li {
			position: relative;
			display: flex;
			justify-content: space-around;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			&__value {
				width: 0.72rem;
				height: 0.72rem;
				margin-bottom: 0.12rem;
				font-family: Arial;
				font-size: 0.3rem;
				font-weight: 400;
				color: #333333;
			}

			&__label {
				height: 0.34rem;
				line-height: 0.34rem;
				font-family: PingFang SC;
				font-size: 0.24rem;
				font-weight: 400;
				color: #333333;
			}

			.badge {
				position: absolute;
				top: .04rem;
				right: .02rem;
				min-width: 0.28rem;
				height: 0.28rem;
				border-radius: 50%;
				background-color: #FF4444;
				font-size: 0.2rem;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 0.24rem;
				padding: .02rem;
			}
		}
	}
}

.empty_box {
	height: 0.24rem;
	background: #f2f4f5;
}

.yqhy_box {
	width: 100%;
	padding: 0.20rem;
	box-sizing: border-box;

	.yqhy_img {
		width: 100%;
		display: block;
	}

}

.service-box {
	width: 100%;
	background-color: #FFFFFF;

	.service-box-title {
		height: 0.44rem;
		line-height: 0.44rem;
		font-weight: 500;
		font-size: 0.32rem;
		padding: 0.28rem 0.56rem 0.4rem;
		color: #333333;
	}

	.service-box-ul {
		// display: flex;
		// flex-wrap: wrap;
		padding: 0.32rem 0.36rem;

		// position: relative;
		// z-index: 1;
		.service-box-li {
			width: 100%;
			margin-bottom: 0.4rem;
			display: flex;
			align-items: center;
			position: relative;

			&.last-li {
				margin-bottom: 0.32rem;
			}

			.arrow_icon {
				width: .32rem;
				height: .32rem;
				position: absolute;
				right: .0rem;
				top: 50%;
				transform: translateY(-50%);
			}

			.service-box-li-icon {
				display: block;
				// margin: auto;
				width: 0.4rem;
				height: 0.4rem;
				// margin-bottom: 0.16rem;
				margin-right: .24rem;
			}

			.service-box-li-name {
				height: 0.34rem;
				line-height: 0.34rem;
				font-size: .28rem;
				// font-weight: 500;
				text-align: center;
				color: #333333;
			}
		}
	}
}

/* 微信授权弹窗 */
.wechat-auth-modal {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.6rem;

	.modal-content {
		width: 100%; 
		background-color: #fff;
		border-radius: 0.2rem;
		padding: 0.48rem;
		text-align: center;

		.modal-icon {
			width: 1.2rem;
			height: 1.2rem;
			margin: 0 auto 0.32rem;
			display: block;
		}

		.modal-title {
			font-size: 0.36rem;
			font-weight: 600;
			color: #333;
			margin-bottom: 0.2rem;
		}

		.modal-desc {
			font-size: 0.28rem;
			color: #666;
			margin-bottom: 0.48rem;
			line-height: 0.42rem;
		}

		.auth-btn {
			display: block;
			width: 100%;
			height: 0.88rem;
			line-height: 0.88rem;
			background-color: #07C160;
			color: #fff;
			border: none;
			border-radius: 0.44rem;
			font-size: 0.32rem;
			font-weight: 500;
			cursor: pointer;
		}
	}
}
</style>
